<template>
	<view class="jihuapage">
		<view class="userdate">
			 <view class="iconfont icon-fuwu1">
			 	
			 </view>
				 用户{{user.memberName||user.memberPhone}}专病服务 第 
				 <view class="day">
				 	{{list[0].cpServiceCurrentDays||0}}
				 </view>
				 天 剩余
				  <view class="sheng">
				  	{{list[0].cpServiceRemainingDays||0}}
				  </view>
				  天
		</view>
		<view class="weekline">
			<view class="week">
				<picker  mode="date" :value="date" :start="startDate" :end="endDate" @change="bindDateChange">
					<view class="picker">
						<view class="picker">{{date}} <view class="iconfont icon-xiangxiabeifen"></view></view>
						
					</view>
				</picker>
			</view>
			<view class="weektitle">
				第 {{list[0].psStageNo||0}} 阶段 第 {{list[0].weekNo||0}} 周
			</view>
			
		</view>
		<view class="list">
			<view style="text-align: center;margin: 20rpx 0; color: gray;" v-if="list.length==0">
				服务未开始
			</view>
			<view class="itemday" v-for="item in list " :key="item.taskId">
				<view class="day">
					{{item.taskTime}}
				
				</view>
				<view class="evenbox">
					<view class="yuan">
						
					</view>
					<view class="itemeven">
						<view class="evenname">
							{{item.taskTitle}}
						</view>
						<view class="plancontent">
							{{item.taskContent}}
						</view>
					</view>
				</view>
			</view>
		</view>
				
	</view>
</template>

<script>
	import {getFollowUpPlan} from '../../utils/api.js'
	export default {
		data() {
			const currentDate = this.getDate({
			            format: true
			        })
			return {
				date:currentDate,
				day:'',
				list:[],
				user:uni.getStorageSync('user')
			}
		}, 
		computed: {
		        startDate() {
		            return this.getDate('start');
		        },
		        endDate() {
		            return this.getDate('end');
		        },
				
		    },
			onShow() {
				const date = new Date(); // 当前时间
				const year = date.getFullYear(); // 年
				const month = String(date.getMonth() + 1).padStart(2, '0'); // 月补0
				const day = String(date.getDate()).padStart(2, '0'); // 日补0
              let time=`${year}-${month}-${day}`
			  this.day=time
				let p={
					phone:uni.getStorageSync('phone'),
					day:time+' 00:00:00'
				}
				getFollowUpPlan(p).then(res=>{
					console.log(res,'当日计划')
					this.list=res.data.data
				})
			},
		methods: {
			getDate(type) {
			           const date = new Date();
			           let year = date.getFullYear();
			           let month = date.getMonth() + 1;
			           let day = date.getDate();
			
			           if (type === 'start') {
			               year = year - 10;
			           } else if (type === 'end') {
			               year = year + 10;
			           }
			           month = month > 9 ? month : '0' + month;
			           day = day > 9 ? day : '0' + day;
			           return `${year}-${month}-${day}`;
			       },
				   
				   bindDateChange(e){
					   this.date=e.detail.value
					   let p={
					   	phone:uni.getStorageSync('phone'),
					   	day:e.detail.value+' 00:00:00'
					   }
					   getFollowUpPlan(p).then(res=>{
					   	console.log(res,'当日计划')
						this.list=res.data.data
						
					   })
				   },
		}
	}
</script>

<style lang="less" scoped>
   .jihuapage{
	   width: 750rpx;
	   box-sizing: border-box;
	   background: linear-gradient(180deg, rgba(242,248,255,1) 0%,rgba(242,248,255,1) 100%);
	   padding-bottom: 200rpx;
	.userdate{
	   	width: 100%;
	   	background-color: #FFFCF6 ;
	   	font-size: 26rpx;
	   	display: flex;
	   	align-items: center;
	   	justify-content: center;
	   	font-weight: bold;
	   	color: gray;
	   	padding: 12rpx 0;
	   	.day{
	   		font-size: 30rpx;
	   		color: black;
	   		
	   	}
	   	.sheng{
	   		font-size: 30rpx;
	   		color: #FF4D00 ;
	   	}
	 }
	 
	   .weekline{
	   	width: 100%;
	   	
	   
	   	padding: 40rpx 0;
	   	background-color: white;
		.weektitle{
			text-align: center;
			font-size: 28rpx;
		}
	   	.week{
	   		margin: 0 30rpx;
	   		font-weight: bold;
	   		color: #1A4F8A;
	   		font-size: 32rpx;
	   		font-family: OPPOSans-black;
	   		display: flex;
	   		align-items: center;
				justify-content: center;
	   		.picker{
	   			display: flex;
	   			align-items: center;
	   			position: relative;
	   		}
	   		.iconfont{
	   			color:#5c6fac;
	   			
	   		}
	   	}
	   	}
		.list{
			width: 100%;
			box-sizing: border-box;
			padding: 20rpx;
			margin-top: 40rpx;
			background-color: white;
			.itemday{
				width: 100%;
				display: flex;
				align-items: center;
				flex-direction: row;
				  /* 确保子元素拉伸至相同高度 */
				  align-items: stretch;
				  margin-bottom: 20rpx;
				
				.day{
					width: 100rpx;
					min-width: 100rpx;
					text-align: center;
					font-weight: bold;
					font-size: 30rpx;
					height: 100%;
				
				}
				.evenbox {
					flex: 1;
					margin-left: 20rpx;
					height: 100%;
					padding-left: 30rpx;
					border-left: 1rpx solid #E4E4E4 ;
					position: relative;
					background-color: #F4F8FF;
					.evenname{
						font-weight: bold;
						font-size: 34rpx;
						
					}
					.plancontent{
						font-size: 30rpx;
						line-height: 1.8;
					}
					.yuan{
						width: 30rpx;
						height: 30rpx;
						border-radius: 50%;
						box-sizing: border-box;
						background-color: white;
						border: 8rpx solid #646CA0 ;
						position: absolute;
						left: -15rpx;
						top: 20rpx;
					}
				}
			}
		}
   }
</style>
